<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        商户管理
        <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>押金政策
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="form" label-width="100px">
            <el-form-item label="政策名称">
              <el-input v-model="form.policyName" placeholder="请输入政策名称"></el-input>
            </el-form-item>
            <el-form-item label="政策编号">
              <el-input v-model="form.policyCode" placeholder="请输入政策编号"></el-input>
            </el-form-item>
            <el-form-item label="押金方式">
              <el-select v-model="form.depositFlag" placeholder="请选择押金方式">
                <el-option v-for="items in deposit"
                :key="items.value"
                :label="items.label"
                :value="items.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="当前状态">
              <el-select v-model="form.status" placeholder="请选择当前状态">
                <el-option label="全部" value=""></el-option>
                <el-option label="启用" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
                v-model="form.startDate"
                style="width: 100%;"
              ></el-date-picker>
              <div class="times">-</div>
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
                v-model="form.endDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
          <el-button type="primary" v-if="isAuth('depositPolicySearch')" @click="handleSelectLists">搜索</el-button>
          <el-button @click="resetTheSearch" v-if="isAuth('depositPolicyReset')">重置</el-button>
          <el-button type="primary" @click="addPolicy" v-if="isAuth('addDepositPolicy')" icon="el-icon-plus" class="butt" style="margin-left:40px">添加政策</el-button>
          <el-button @click="exportFiles" v-if="isAuth('depositPolicyExport')" class="butt" type="primary">批量导出</el-button>
        </div>
        <el-table
          :data="list"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          ref="multipleTable"
        >
          <el-table-column type="index" width="100" label="序列号"></el-table-column>
          <el-table-column show-overflow-tooltip min-width="200" prop="policyName" label="政策名称"></el-table-column>
          <el-table-column show-overflow-tooltip min-width="160" prop="policyCode" label="政策编号"></el-table-column>
          <el-table-column show-overflow-tooltip min-width="80" prop="depositFlag" label="押金方式">
            <template slot-scope="scope">
              <span v-if="scope.row.depositFlag == 0">押金</span>
              <span v-if="scope.row.depositFlag == 2">非押金</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip min-width="160" prop="createDate" label="创建时间"></el-table-column>
          <el-table-column show-overflow-tooltip min-width="80" prop="status" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">启用</span>
              <span v-if="scope.row.status == 1">停用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope" class="scope">
              <el-button type="text" v-if="isAuth('updateDepositPolicy')" @click="createWindow(scope.row.id )" >修改</el-button>
              <el-button type="text" style="color:#F56C6C" v-if="scope.row.status == 0 && isAuth('depositPolicyStatus')" @click="handleQuery(scope.row.id, 1)">停用</el-button>
              <el-button  type="text"  v-if="scope.row.status == 1 && isAuth('depositPolicyStatus')"  @click="handleQuery(scope.row.id, 0)" >启用</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="font-size: 16px;margin-top: 30px">
          <el-pagination
            style="text-align: right;"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="form.page"
            :page-sizes="[20, 50, 100]"
            :page-size="form.number"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <el-dialog width="400px"  title="添加政策" :visible.sync="dialogVisible">
        <el-form :model="forms" :rules="rules" ref="forms" label-width="80px">
          <el-row>
            <el-Col>
              <el-form-item style="margin-bottom:20px" prop="policyName" label="政策名称">
                <el-input
                  :maxlength="40"
                  v-model="forms.policyName"
                  placeholder="请输入政策名称"
                ></el-input>
              </el-form-item>
            </el-Col>
          </el-row>
          <el-row>
            <el-Col>
              <el-form-item style="margin-bottom:20px" prop="policyCode" label="政策编号">
                <el-input
                  :maxlength="5"
                  @input="value=>forms.policyCode=value.replace(/[^\w]/ig,'')"
                  v-model="forms.policyCode"
                  placeholder="请输入政策编号"
                ></el-input>
              </el-form-item>
            </el-Col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item style="margin-bottom:20px" prop="depositFlag" label="押金方式">
                <el-select v-model="forms.depositFlag" placeholder="请选择押金方式">
                <el-option v-for="items in deposit"
                :key="items.value"
                :label="items.label"
                :value="items.value"></el-option>
              </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false;forms.depositFlag='0';forms.policyName='';forms.policyCode=''">取 消</el-button>
        <el-button type="primary"  @click="create('forms')">确 定</el-button>
      </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import https from '../../plugins/https.js'
// 批量导出
import { exportFile } from "../../plugins/expord"
export default {
  data() {
    return {
      rules:{
        policyName:[{ required: true, message: '请输入政策名称', trigger: 'blur' }],
        policyCode:[{ required: true, message: '请输入政策编号', trigger: 'blur' }],
        depositFlag:[{ required: true, message: '请选择押金方式', trigger: 'change' }],
      },
      forms: {
        depositFlag:'0',
        policyName: "",
        policyCode:"",
      },
      dialogVisible: false, //创建修改政策弹框
      list: [],
      deposit:[],
      total: 0,
      form: {
        depositFlag:"",
        policyName: "",
        startDate:"",
        endDate:"",
        policyCode:"",
        status:"",
        page: 1,
        number: 20
      }
    };
  },
  created(){
    this.policyList()
    https.queryDictList({type:"deposit_flag"}).then(res=>{
      this.deposit=res.data.data
    }).catch(err=>{})
  },
  methods: {
    // 搜索
    handleSelectLists(){
      this.policyList()
    },
    // 重置
    resetTheSearch(){
      this.form= {
        depositFlag:"",
        policyName: "",
        startDate:"",
        endDate:"",
        policyCode:"",
        status:"",
        page: 1,
        number: 20
      }
      this.policyList()
    },
    //分页
    handleSizeChange(val) {
      let that = this;
      that.form.number = val;
      that.form.page = 1;
      that.policyList();
    },
    handleCurrentChange(val) {
      let that = this;
      that.form.page = val;
      that.policyList();
    },
    // 列表
    policyList(){
      https.merPolicyCfgList(this.form).then(res=>{
        console.log(res)
        if(res.data.code=="0000"){
          this.list=res.data.data
          this.total=res.data.total
        }else{
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
        }
      }).catch(err=>{})
    },
    //添加押金政策
    addPolicy(){
      
      this.dialogVisible=true
    },
    // 批量导出
    exportFiles(){
      let that = this;
      exportFile("/api/merchant/merPolicyCfg/excel/export",that.form,"押金政策")
    },
    // 添加政策
    create(){
      let that = this;
      that.$refs["forms"].validate(valid => {
         if (valid) {
           https.saveMerPolicyCfg(this.forms).then(res=>{
            if(res.data.code=="0000"){
              this.dialogVisible=false
              this.policyList()
              this.forms= {
                depositFlag:'0',
                policyName: "",
                policyCode:"",
              }
            }else{
              layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2 //2秒后自动关闭
              })
            }
           })
         }
      })
    },
    // 修改
    createWindow(val){
      https.getMerPolicyCfg({id:val}).then(res=>{
        if(res.data.code=="0000"){
          this.forms=res.data.data
          this.dialogVisible=true
        }else{
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //2秒后自动关闭
          })
        }
      })
    },
    // 停用启用
    handleQuery(val){
      https.updatePolicyStatus({id:val}).then(res=>{
        if(res.data.code=="0000"){
          this.policyList()
        }else{
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //2秒后自动关闭
          })
        }
      })
    },
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /* height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.times {
  width: 20px;
  display: inline-block;
  text-align: center;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
</style>